<template lang='pug'>
DataTablePage.dataTable(
  ref="dataTable"
  :isNeedColumnFilter="false"
  :resource="resource"
  :columns="columns"
  :tableWidth="tableWidth"
  :tableInitList="tableInitList"
  :tableFullList="tableFullList"
  :filterInitList="filterInitList")
</template>

<script>
/**
 * @description 设备信息
 * @author linmn
 */
import DataTablePage from '@/containers/DataTablePage'
export default {
  name: 'DeviceInfo',
  components: {
    DataTablePage
  },
  watch: {
    target (val) {
      this.$set(this, 'resource', `/pn/dpa/pressureAreaSite/${val}`)
      setTimeout(() => {
        this.$refs.dataTable.getData()
      }, 300)
    }
  },
  data () {
    return {
      changeLoad: true,
      resource: `/pn/dpa/pressureAreaSite/${this.target}`,
      tableWidth: 600,
      tableInitList: ['deviceName', 'siteCode', 'siteName', 'address', 'pressureAreaName'],
      tableFullList: ['deviceName', 'siteCode', 'siteName', 'address', 'pressureAreaName'],
      filterInitList: ['deviceName', 'siteCode', 'siteName', 'address'],
      filterByAlways: {},
      columns: {
        deviceName: {
          label: '设备名称',
          width: 100,
          render: 'select',
          relation: 'deviceNames',
          form: {
            type: 'select',
            live: true
          },
          filter: {
            type: 'select',
            like: true,
            live: true,
            width: 120
          },
          minLength: 2
        },
        siteCode: {
          label: '站点编号',
          width: 100,
          filter: {
            type: 'input',
            width: 80,
            like: true,
            rules: [{
              type: 'reg',
              value: /^[A-Za-z0-9]+$/,
              message: '请输入数字或英文的站点编号'
            }]
          }
        },
        siteName: {
          label: '站点名称',
          width: 100,
          filter: {
            type: 'input',
            width: 80,
            like: true
          }
        },
        address: {
          label: '安装地址',
          width: 250,
          minLength: 7,
          filter: {
            type: 'input',
            like: true,
            width: 120
          }
        },
        pressureAreaName: {
          label: '分区',
          width: 80
        }
      }
    }
  },
  props: {
    target: Number // 目标分区id
  }
}
</script>

<style lang='sass' scoped>
@import '../../../assets/custom.sass'
.dataTable.main
  padding: 8px
  /deep/ .table-top,
  /deep/ .filter-box
    margin: 0
</style>
